import formatRichText from '@/utils/dealWithTextImg'
import React from 'react'
import styles from './index.module.less'

export default function (props) {
    const { question, anwser, onCheck } = props

    return (
        <div className={styles.container}>
            <div
                className={styles.question_title}
                dangerouslySetInnerHTML={{
                    __html: formatRichText(question?.title),
                }}
            />
            <div className={styles.question_options}>
                {question?.options?.map((item, index) => {
                    return (
                        <div
                            key={`${item.id}`}
                            className={[styles.option_item, item.id === anwser?.option_id && styles.option_checked].join(' ')}
                            onClick={() => {
                                onCheck && onCheck(question.id, item.id, item.jump_question_id)
                            }}
                        >
                            <div className={[styles.option_value].join(' ')}>
                                <div>{String.fromCharCode(65 + index)}</div>
                            </div>
                            <div className={styles.option_content}>
                                <div
                                    dangerouslySetInnerHTML={{
                                        __html: formatRichText(item.title),
                                    }}
                                />
                            </div>

                            {/* <div className={styles.option_checked_left}></div>
              <div className={styles.option_checked_right}></div> */}
                        </div>
                    )
                })}
            </div>
        </div>
    )
}
